
<template>
  <div class="container">
    <div class="list"
         id="list"
         ref="list">
      <ul>
        <li v-for="(item,index) in msglist"
            :key="index">
          <RightItem :id="item.id"
                     :type="item.type"
                     :content="item.content"
                     v-if="item.me"></RightItem>
          <LeftItem :id="item.id"
                    :type="item.type"
                    :content="item.content"
                    v-else></LeftItem>
          <div v-scroll
               style="height: 0"></div>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <div class="line"></div>
      <div class="input-send">
        <van-field v-model="text"
                   placeholder="请输入聊天内容..."
                   class="input" />
        <van-button plain
                    type="info"
                    class="send"
                    @click="send">发送</van-button>
      </div>

    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import { getChatResponse } from '@/api/robot.js';
import LeftItem from './LeftItem';
import RightItem from './RightItem';

Vue.directive('scroll', {
  inserted (el) {
    el.scrollIntoView()
  }
})

export default {
  name: 'Chat',
  components: { LeftItem, RightItem },
  data: () => {
    return {
      text: '',
      msglist: [{
        id: 1,
        type: 1,
        content: '专注家政服务100年！全国有80多家自营店 为1185468名家庭服务找到好保姆；共有64万服务员',
        me: false,
        head: ''
      }]
    }
  },
  methods: {
    send () {
      if (this.text) {
        this.getResponse(this.text)
        this.msglist.push({
          id: this.msglist[this.msglist.length - 1].id + 1,
          type: 1,
          content: this.text,
          me: true
        })
        if (this.text === '图片') {
          this.msglist.push({
            id: this.msglist[this.msglist.length - 1].id + 1,
            type: 2,
            content: 'http://6emm.hxzdhn.com/img/2020/06/28/jausoellbtf.jpg',
            me: false
          })
        } else {
          console.log(this.text)
          this.getResponse(this.text)
        }
        this.text = ''
      }
    },
    async getResponse () {
      // console.log(text)
      const { data: res } = await getChatResponse(this.text)
      console.log(res.data.info.text)
      this.head = res.data.info.text
      getChatResponse(this.text).then(res => {
        console.log(res)
        this.msglist.push({
          id: this.msglist[this.msglist.length - 1].id + 1,
          type: 1,
          content: this.head,
          me: false
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  .list {
    width: 100%;
    height: 100%;
    margin-bottom: 280px;
  }

  .bottom {
    width: 100%;
    position: fixed;
    bottom: 140px;

    .line {
      width: 100%;
      height: 1px;
      background-color: #ddd;
    }

    .input-send {
      display: flex;
      justify-content: space-between;
      background-color: #fff;

      .input {
        padding-right: 10px;
      }

      .send {
        width: 150px;
        height: 60px;
        margin-top: 7px;
        margin-right: 10px;
      }
    }
  }
}
</style>
